<template>
  <div class="container">
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="6"><h1>医生管理模块</h1></el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="danger">删除</el-button>
        <el-button type="primary" @click="dialogVisible = true">新增医生</el-button>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 50px;">
        <el-col :span="6">
          <el-input v-model="searchVal" placeholder="请输入医生姓名" v-model:="searchVal" />
        </el-col>
        <el-col :span="18">
          <el-button type="primary" @click="getAdminList">搜索</el-button>
        </el-col>
      </el-row>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="医生姓名" />
        <el-table-column prop="avatar" label="医生头像" />
        <el-table-column prop="campusId" label="院区"
                         :formatter="campusFrom"
        />
        <el-table-column prop="professionalId" label="职称"
                          :formatter="professionalFrom"
        />
        <el-table-column prop="departmentId" label="科室"
        :formatter="departmentFrom"
        />
        <el-table-column prop="labels" label="标签" />
        <el-table-column prop="introduce" label="医生简介" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle style="margin-right: 10px;" @click="editDepartment(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteDoctor(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" align="middle" style="margin-top: 20px;">
        <el-col :span="24" style="text-align: right;">
          <el-pagination
            :current-page="listQuery.pageNum"
            :page-sizes="[10, 20, 30]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>

      <!-- 新增医生的弹窗 -->
      <el-dialog
        title="新增医生"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="form" label-width="100px">
          <el-form-item label="医生姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="医生头像">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.avatar" :src="form.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="院区">
            <el-select v-model="form.campusId" placeholder="请选择院区">
              <el-option label="北院" value="10" />
              <el-option label="南院" value="20" />
              <el-option label="东院" value="30" />
              <el-option label="西院" value="40" />
            </el-select>
          </el-form-item>
          <el-form-item label="科室">
            <el-select v-model="form.departmentId" placeholder="请选择科室">
              <el-option label="内科" value="100" />
              <el-option label="外科" value="200" />
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-select v-model="form.professionalId" placeholder="请选择职称">
              <el-option label="主治医师" value="500" />
              <el-option label="副主任医师" value="600" />
              <el-option label="护士" value="700" />
              <el-option label="护工" value="800" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="form.labels" />
          </el-form-item>
          <el-form-item label="医生简介">
            <el-input v-model="form.introduce" type="textarea" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增修改的弹窗 -->
      <el-dialog
        title="修改信息"
        :visible.sync="editDialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="editForm" label-width="100px">
          <el-form-item label="医生姓名">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item label="医生头像">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="editForm.avatar" :src="editForm.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="院区">
            <el-select v-model="editForm.campusId" placeholder="请选择院区">
              <el-option label="北院" value="10" />
              <el-option label="南院" value="20" />
              <el-option label="东院" value="30" />
              <el-option label="西院" value="40" />
            </el-select>
          </el-form-item>
          <el-form-item label="科室">
            <el-select v-model="editForm.departmentId" placeholder="请选择科室">
              <el-option label="内科" value="100" />
              <el-option label="外科" value="200" />
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-select v-model="editForm.professionalId" placeholder="请选择职称">
              <el-option label="主治医师" value="500" />
              <el-option label="副主任医师" value="600" />
              <el-option label="护士" value="700" />
              <el-option label="护工" value="800" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="editForm.labels" />
          </el-form-item>
          <el-form-item label="医生简介">
            <el-input v-model="editForm.introduce" type="textarea" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateDepartment">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>

  </div>
</template>
<script>
import {getAlldoctros, createddoctros, updatedoctros, deletedoctros} from '@/api/doctros'

export default {
  data() {
    return {
      searchVal: '', // 搜索框查询
      tableData: [], // 列表数据
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false, // 控制新增医生弹窗的显示与隐藏
      editDialogVisible: false, // 控制修改医生弹窗的显示与隐藏
      form: {
        name: '',
        avatar: '',
        campusId: '',
        professionalId: '',
        departmentId: '',
        labels: '',
        introduce: ''
      },
      editForm: {
        id: '',
        name: '',
        avatar: '',
        campusId: '',
        professionalId: '',
        departmentId: '',
        labels: '',
        introduce: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getAdminList()
    },
    switchStatus(status) {
      console.log(status)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(e) {
      console.log(e)
    },
    getAdminList() {
      const that = this
      getAlldoctros().then(res => {
        const data = res['data']
        that.listQuery.total = data['total']
        that.tableData = data['list']
        console.log(res)
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleAvatarSuccess1(res, file) {
      this.editForm.avatar = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitForm() {
      // 提交表单数据
      createddoctros(this.form).then(res => {
        this.$message.success('新增医生成功')
        this.dialogVisible = false
        this.getAdminList() // 刷新列表
        this.form = {}
        console.log(res)
      }).catch(error => {
        this.$message.error('新增医生失败')
        console.error(error)
      })
    },
    deleteDoctor(row) {
      this.$confirm('此操作将永久删除该医生信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用 API 删除医生
        deletedoctros(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 刷新列表
          this.getAdminList()
        }).catch((error) => {
          this.$message.error('删除失败')
          console.error(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editDepartment(row) {
      this.editForm = {...row}
      this.editDialogVisible = true
    },
    updateDepartment() {
      const id = this.editForm.id
      const data = {
        name: this.editForm.name,
        avatar: this.editForm.avatar,
        campusId: this.editForm.campusId,
        professionalId: this.editForm.professionalId,
        departmentId: this.editForm.departmentId,
        labels: this.editForm.labels,
        introduce: this.editForm.introduce,
      }
      updatedoctros(id, data).then(() => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.editDialogVisible = false
        this.getAdminList() // 刷新列表
      }).catch((error) => {
        this.$message.error('修改失败')
        console.error(error)
      })
    },
    campusFrom(row, column, cellValue, index) {
      if (cellValue == 10) {
        cellValue = '北院';
      } else if (cellValue == 20) {
        cellValue = '南院';
      } else if (cellValue == 30) {
        cellValue = '东院';
      } else if (cellValue == 40) {
        cellValue = '西院';
      }
      return cellValue;
    },
    departmentFrom(row, column, cellValue, index){
      if (cellValue == 100) {
        cellValue = '内科';
      }else if (cellValue == 200) {
        cellValue = '外科';
      }
      return cellValue;
    },
    professionalFrom(row, column, cellValue, index){
        if (cellValue == 500) {
          cellValue = '主治医师';
        }else if (cellValue == 600) {
          cellValue = '副主任医师';
        }else if (cellValue == 700) {
          cellValue = '护士';
        }else if (cellValue == 800) {
          cellValue = '护工';
        }
        return cellValue;
    }
  }
}
</script>

<style scoped>

</style>
